<template>
	<view>
		<view class="head-bg padding-lr">
			<view @click="getProfile" class="user-info flex align-center justify-between">
				<view class="flex align-center">
					<image class="round head-img" :src="wxAvatar ? wxAvatar : '../../static/head.png'"
						mode="aspectFill">
					</image>
					<view class="mobile"> {{ nickName ? nickName : '请登录' }} </view>
				</view>
			</view>
			<view class="flex vip-bg justify-between align-center">
				<view @click="navTo('mycombolist')" class="taocan">
					<view class="title">我的权益</view>
					<view class="desc">对话次数： 无限 </view>
				</view>
				<button @click="rede" class="cu-btn">兑换码</button>
			</view>
		</view>
		<view class="mine-list padding-lr">
			<view @click="navTo('help')" class="flex item align-center">
				<u-icon name="/static/icon/mine-xin.png" size="40"></u-icon>
				<view class="flex align-center justify-between solid-bottom margin-left-sm">
					<view class="title">使用指南</view>
					<view class="flex align-center">
						<view class="desc">提问的艺术</view>
						<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
					</view>
				</view>
			</view>
			<view @click="toVip" class="flex item align-center" v-if="showPay">
				<u-icon name="/static/icon/mine-gift.png" size="40"></u-icon>
				<view class="flex align-center justify-between solid-bottom margin-left-sm">
					<view class="title">开通权益</view>
					<view class="flex align-center">
						<view class="desc">享专属特权</view>
						<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
					</view>
				</view>
			</view>

			<button open-type="feedback" class="flex item align-center">
				<u-icon name="/static/icon/mine-xin.png" size="40"></u-icon>
				<view class="flex align-center justify-between solid-bottom margin-left-sm">
					<view class="title">问题反馈</view>
					<view class="flex align-center">
						<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
					</view>
				</view>
			</button>

			<view @click="logout" class="flex item align-center">
				<u-icon name="/static/icon/quit.png" size="40"></u-icon>
				<view class="flex align-center justify-between solid-bottom margin-left-sm">
					<view class="title">退出登录</view>
					<view class="flex align-center">
						<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
					</view>
				</view>
			</view>

			<!-- 			<view class="flex align-center justify-center padding-tb text-blue">
				<navigator url="../content/content?content_id=1">
					<view class=" ">用户协议</view>
				</navigator>
				<view class="text-gray padding-lr-sm">
					|
				</view>
				<navigator url="../content/content?content_id=2">
					<view class=" ">隐私政策</view>
				</navigator>
			</view> -->
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="兑换码" :value="rede_code" placeholder="请输入兑换码"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<daxiang-getUserProfile ref="getUserProfile"></daxiang-getUserProfile>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				showContact: false,
				showDevNav: false,
				rede_code: '',
				loginCode: "",
				nickName: "",
				userId: "",
				wxAvatar: "",
				openId: "",
			};
		},
		computed: {

		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo');
			this.nickName = userInfo.nickName
			this.userId = userInfo.userId
			this.openId = userInfo.openid
			this.wxAvatar = userInfo.wxAvatar
		},
		onShareAppMessage() {
			return {
				title: '快来和胖胖聊天呀',
				path: '/pages/index/home?share_m_id=' + this.userInfo.nickName,
				imageUrl: 'https://s1.ax1x.com/2023/03/19/ppYVZRK.jpg'
			}
		},
		methods: {
			toVip() {
				uni.navigateTo({
					url: "/pages/vip/vip"
				})
			},
			navTo(id) {
				switch (id) {
					case "help":
						uni.navigateTo({
							url: '/pages/content/help'
						})
						break;
				}
			},
			showContactPop() {
				this.showContact ? this.showContact = false : this.showContact = true;
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: '010-86203046'
				})
			},
			getProfile(e) {
				this.$refs.getUserProfile.open({
					desc: '授权登录',
					success: e => {
						console.log(e)
						// 更新用户信息
						this.$request('/system/user/edit/xcxUser', 'POST', {
							userId: this.userId,
							nickName: e.userInfo.nickName,
							wxAvatar: e.userInfo.avatarUrl,
							openId: this.openId
						}, {
							'content-type': 'application/json'
						}).then(res => {
							if (res.code == 200) {
								// 更新缓存
								uni.setStorageSync('userInfo', res.data)
								uni.redirectTo({
									url: "/pages/mine/mine"
								})
							}
						})
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			rede() {
				this.$refs.popup.open()
			},
			dialogInputConfirm(val) {
				if (!val) {
					uni.showModal({
						content: "请输入兑换码！"
					});
					return
				}
				uni.showLoading({
					title: '兑换中...'
				})
				this.$request('/api/Redemption/rede', 'POST', {
					code: val
				}).then(res => {
					console.log(res)
					if (res.status == 200) {
						this.$refs.inputClose.close()
						uni.hideLoading()
						uni.showModal({
							content: "已兑换成功"
						})
						this.rede_code = ""
						this.$store.commit('syncUserNum', res.data.num)
					} else {
						this.$refs.inputClose.close()
						uni.hideLoading()
						uni.showModal({
							content: res.status == 201 ? res.msg : '核销失败'
						})
					}
				})
			},
			logout() {
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('token')
				this.$request("/login/logout", "Post").then((res) => {
					if (res.code == 200) {
						uni.reLaunch({
							url: "../index/home"
						})
					} else {
						this.$failToast('服务器繁忙，请稍后再试');
					}
				});

			}
		},
	};
</script>

<style>
	/*每个页面公共css */
	@import url("@/static/style/color-ui.css");
</style>

<style lang="scss">
	.head-bg {
		/* #ifndef H5 */
		padding-top: var(--status-bar-height);
		margin-top: 60rpx;
		/* #endif */
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		// width: 100%;
		height: 574rpx;

		.user-info {
			/* #ifdef H5 */
			padding-top: 60rpx;
			/* #endif */
			/* #ifndef H5 */
			padding-top: 30rpx;

			/* #endif */
			.head-img {
				width: 120rpx;
				height: 120rpx;
			}

			.mobile {
				padding-left: 23rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #222222;
			}

			.info-edit {
				font-size: 24rpx;
				font-weight: 500;
				color: #848b9e;
				line-height: 18rpx;
				padding-right: 12rpx;
			}
		}

		.vip-bg {
			background-image: url("@/static/img/mine/mine-vip-bg.png");
			background-repeat: no-repeat;
			background-size: 100%;
			// width: calc(100% - 60rpx);
			height: 133rpx;
			padding: 30rpx 24rpx 30rpx 30rpx;
			margin-top: 50rpx;

			.taocan {
				color: #ffffff;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					line-height: 33rpx;
				}

				.desc {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 33rpx;
					padding-top: 19rpx;
				}
			}

			.cu-btn {
				height: 48rpx;
				background: linear-gradient(90deg, #ffefc9 0%, #e9c98d 100%);
				border-radius: 24rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #863f18;
				line-height: 35rpx;
			}
		}
	}

	.mine-list {
		margin-top: -181rpx;

		button {
			border: none;
			margin: 0;
			padding: 0;
			background-color: inherit;
		}

		button::after {
			border: none;
		}

		.item {
			// width: calc(100% - 60rpx);

			.solid-bottom {
				width: 100%;
			}

			.title {
				padding-top: 50rpx;
				padding-bottom: 50rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #141e34;
				line-height: 56rpx;
			}

			.desc {
				padding-right: 13rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #848b9e;
				line-height: 40rpx;
			}
		}
	}
</style>